<template>
  <!-- 用户权限信息 -->
  <div class="user-permissions borderStyle">
    <div class="user-permissions-title smallCenterTitle centerbox">用户权限信息</div>
    <div class="user-permissions-operate centerbox">
      <div class="left-btn">
        <el-button type="primary" @click="showNewPop">新增</el-button>
        <el-button type="primary" @click="deletePop">删除</el-button>
      </div>
      <div class="right-btn endbox">
        <el-button type="primary" @click="showLockInformation">锁具信息</el-button>
      </div>
    </div>
    <div class="user-permissions-table bigTableStyle">
      <el-table
      border
        :data="tableData"
        @current-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        height="100%"
        highlight-current-row
      >
        <!-- <el-table-column type="selection" width="60"></el-table-column> -->
        <el-table-column type="index" label="索引号" width="100"></el-table-column>
        <el-table-column prop="persionName" label="姓名"></el-table-column>
        <el-table-column prop="persionPassword" label="密码"></el-table-column>
        <el-table-column prop="persionCard" label="身份识别信息"></el-table-column>
        <el-table-column prop="deviceName" label="操作设备"></el-table-column>
      </el-table>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      :title="dialogTitle1"
      top="18vh"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <NewUserPop @cancelForm="handleClose" v-if="dialogVisible" />
    </el-dialog>
    <!-- 锁具信息 -->
    <el-dialog
      :title="dialogTitle1"
      top="15vh"
      :visible.sync="dialogVisibleInfo"
      width="50%"
      :before-close="handleClose"
    >
      <LockInformation v-if="dialogVisibleInfo" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import NewUserPop from "./popup/NewUserPop.vue";
import LockInformation from "./popup/LockInformation.vue";
import { LocksAPIModule } from "@/store/modules/locks";
interface tableDataList {
  index: number;
  name: string;
  password: string;
  identity: string;
  operate: string;
}
@Component({
  components: {
    NewUserPop,
    LockInformation,
  },
})
export default class UserPermissions extends Vue {
  tableData: Array<tableDataList> = [
    // {
    //   index: 1,
    //   name: "王小虎",
    //   password: "123456",
    //   identity: "74578121",
    //   operate: "辅助柜前门",
    // },
  ];
  dialogTitle1 = "锁具信息";
  tableSelect: any = {};

  get stationId() {
    return LocksAPIModule.stationId;
  }

  @Watch("stationId")
  public aaaa() {
    this.fetch();
  }

  mounted() {
    this.fetch();
  }

  fetch() {
    // console.log(11111111111111, this.stationId);
    var params = {
      stationId: this.stationId,
    };
    if (this.stationId) {
      (this as any).$services
        .getUserList({ data: params })
        .then((result: any) => {
          if (result.data) {
            // console.log(result);
            this.tableData = result.data;
          }
        })
        .catch((err: object) => {
          console.log(err);
        });
    } else {
      this.tableData = [];
    }
  }

  handleSelectionChange(val: any): void {
    console.log(val);
    this.tableSelect = val;
  }

  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  // 控制弹窗
  dialogVisible = false;
  dialogVisibleInfo = false;
  // 新增
  showNewPop() {
    this.dialogTitle1 = "新增";
    this.dialogVisible = true;
  }
  // 取消
  handleClose() {
    this.dialogVisible = false;
    this.dialogVisibleInfo = false;
    if (this.dialogVisible === false) {
      this.fetch();
    }
  }
  // 删除
  deletePop() {
    if (!this.tableSelect) {
      this.$message({
        message: "请选择一行数据",
        type: "warning",
      });
    } else {
      this.$confirm("是否删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.tableSelect);
          var params = {
            personCode: this.tableSelect.personCode,
            id: this.tableSelect.id,
          };
          (this as any).$services
            .deletePersonDevice({ data: params, method: "post", postparams:true})
            .then((result: any) => {
              // console.log(result);
              if (result.code===200) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.fetch();
              }
            })
            .catch((err: object) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    }
  }
  // 锁具信息
  showLockInformation() {
    this.dialogTitle1 = "锁具信息";
    this.dialogVisibleInfo = true;
  }
}
</script>

<style lang="scss" scoped>
.user-permissions {
  width: 100%;
  height: 100%;
  padding-top: 0.25rem;
  box-sizing: border-box;
  &-title {
    width: 4.32rem;
    height: 0.36rem;
    margin: auto;
    color: #fff;
  }
  &-operate {
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    padding: 0 0.1rem;
    .left-btn {
      width: 30%;
      height: 100%;
      display: flex;
    }
    .right-btn {
      width: 70%;
      height: 100%;
    }
  }
  &-table {
    width: 100%;
    height: calc(100% - 1rem);
    // margin-top: 1%;
    box-sizing: border-box;
    padding: 0 0.1rem;
  }
}
</style>